<template>
  <com-main>
    <div slot="com_header">首页>商品管理>商品分类</div>
    <div slot="com_content">
      <div class="tttt">
        <el-button type="primary" @click="gotianjia()">添加商品</el-button>
      </div>
      <!-- 添加商品分类弹窗 -->
      <div>
        <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
          <el-form :model="saveobj">
            <el-form-item label="分类名称" label-width="100px">
              <el-input v-model="saveobj.cat_name" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="父级分类" label-width="100px">
              <el-cascader
                v-model="id"
                :options="options"
                :props="caderobj"
              ></el-cascader>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savedown()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 编辑商品分类弹窗 -->
      <div>
        <el-dialog title="编辑商品分类" :visible.sync="isTian">
          <el-form :model="updobj">
            <el-form-item label="分类名称" label-width="100px">
              <el-input v-model="updobj.cat_name"> </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="upddown()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <zk-table
        class="tabletop"
        :data="goodslist"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
      >
        <template slot="valid" slot-scope="{ row }">
          <i
            class="el-icon-success"
            style="color: lightgreen"
            v-if="row.cat_deleted === false"
          ></i>
          <i class="el-icon-erroe" style="color: red" v-else></i>
        </template>
        <template slot="order" slot-scope="{ row }">
          <el-tag v-show="row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-show="row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-show="row.cat_level === 2">三级</el-tag>
        </template>
        <template slot="handle" slot-scope="{ row }">
          <el-button type="primary" size="small" @click="updcate(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="delcate(row)"
            >删除</el-button
          >
        </template>
      </zk-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchobj.pagenum"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="searchobj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </com-main>
</template>
<script>
import ComMain from "../../components/commain.vue";
import {
  api_categories,
  api_catesave,
  api_delcate,
  api_updcate,
} from "../../api/goods";
export default {
  components: {
    ComMain,
  },
  data() {
    return {
      dialogFormVisible: false,
      total: 0,
      searchobj: {
        type: "", //查询参数
        pagenum: 1,
        pagesize: 5,
      },
      goodslist: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "valid",
        },
        {
          label: "分类级别",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "handle",
        },
      ],
      rolesobj: {
        type: "", //查询参数
        pagenum: "",
        pagesize: "",
      },
      caderobj: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      id: 0,
      options: [],
      //添加参数
      saveobj: {
        cat_pid: 3,
        cat_name: "",
        cat_level: 2,
      },
      isTian: false,
      updobj: {
        cat_name: "",
        cat_id: 0,
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    //打开编辑商品弹窗
    updcate(row) {
      this.updobj.cat_name = row.cat_name;
      this.updobj.cat_id = row.cat_id;
      this.isTian = true;
      console.log(this.updobj);
    },
    //编辑函数
    async upddown() {
      let id = this.updobj.cat_id;
      console.log(id);
      console.log(this.updobj.cat_name);
      let rst = await api_updcate(`categories/${id}`, this.updobj);
      let {data,meta}=rst;
      if(meta.status==200){
          this.$message.success(meta.msg);
          this.query();
      }else{
        this.$message.error(meta.msg);
      }
      this.isTian = false;
      // console.log(rst);
    },
    //删除分类
    async delcate(row) {
      let rst = await api_delcate({ id: row.cat_id });
      let { meta } = rst;
      if (meta.status == 200) {
        this.$message.success(meta.msg);
      } else {
        this.$message.error(meta.msg);
      }

      this.query();
    },
    //获取商品分类
    async gotianjia() {
      this.dialogFormVisible = true;
      let rst = await api_categories({ type: 2 });
      let { data, meta } = rst;
      this.options = data;
    },
    //添加商品分类
    async savedown() {
      let rst = await api_catesave(this.saveobj);
      let { data, meta } = rst;
      let { msg, status } = meta;
      if (status == 201) {
        this.$message.success(msg);
        this.query();
      } else {
        this.$message.error(msg);
      }
      this.dialogFormVisible = false;
      this.saveobj = {};
    },
    //数据渲染
    async query() {
      let rst = await api_categories(this.searchobj);
      let { data, meta } = rst;
      let { total, pagenum, pagesize, result } = data;
      this.goodslist = result;
      this.total = total;
      this.searchobj.pagenum = pagenum;
      this.searchobj.pagesize = pagesize;
    },

    // //递归函数
    // digui(obj,arr){
    //     if(!obj.children){

    //     }
    // }

    //分页
    handleSizeChange(val) {
      this.searchobj.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchobj.pagenum = val;
      this.query();
    },
  },
};
</script>
<style>
.block {
  margin-top: 20px;
}
.tttt {
  height: 40px;
  /* margin-left: 20px; */
  margin-bottom: 20px;

  /* width: 1000px; */
}
</style>                    